<template>
	<view style="padding-bottom: 100rpx;background-color: #F8F8F8;">
		<view class="top-background">

		</view>

		<view class="back-arrow" :style="{'padding-top': paddingTop}">
			<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="30" color="#FFFFFF">
			</uni-icons>
			<view style="display: flex;flex-direction: row;">
				<uni-icons @click="toEditAnswer" v-if="answer.isMine" style="margin-right: 30rpx;" type="compose" size="30" color="#ffffff"></uni-icons>
				<uni-icons style="margin-right: 30rpx;" type="star" size="30" color="#ffffff"></uni-icons>
				<uni-icons style="margin-right: 30rpx;" type="more-filled" size="30" color="#ffffff"></uni-icons>
			</view>
		</view>

		<view class="question-info">
			<view style="display: flex; flex-direction: column;width: 690rpx;margin-left: 30rpx;">
				<view
					style="font-size: 120%; color: #ffffff; font-weight: bold; margin-top: 20rpx; margin-bottom: 10rpx">
					{{ question.title }}
				</view>
				<rich-text :nodes="question.context" :class="{'limit-line' : isOut && isNotShow}"
					style="line-height: 50rpx; margin-top: 10rpx;color: #eeeeee;">
				</rich-text>
				<text v-if="isOut && isNotShow" @click="showAll" class="option-text">展开</text>
				<text v-if="isOut && !isNotShow" @click="showAll" class="option-text">收起</text>
			</view>
		</view>

		<view class="main-content">
			<view class="answer">

				<view style="margin: 30rpx 40rpx 30rpx 40rpx;margin-bottom: 40rpx;">
					<userInfoCard :userInfo="answer.userInfo"></userInfoCard>
				</view>

				<view class="answer-content">
					<view v-html="answer.content"></view>
				</view>

				<view class="bottom">
					<view class="time">
						<view>于{{answer.gmtCreate | gmtToDate}}</view>
					</view>
					<view class="options">
						<view class="option" @click="changeAnswerLikeStatus(answer.id)">
							<uni-icons v-if="!answer.isLiked" type="heart" size="30" color="#b3b3b3"></uni-icons>
							<uni-icons v-else type="heart" size="30" color="#5DACB1"></uni-icons>
						</view>
						<view style="font-size: 28rpx;color: gray;">{{answer.likeCount}}</view>
					</view>
					<view class="comments">
						<view class="title">全部评论 {{commentPage.total}}</view>
						<view class="comment-list">
							<view v-for="(comment,index) in comments">
								<view class="comment card">
									<view class="comment-top">
										<view class="avatar">
											<image mode="aspectFill" style="width: 60rpx;height:60rpx;border-radius: 50%;"
												:src="comment.avatar"></image>
										</view>
										<view class="last">
											<view class="nickname">{{comment.nickname}}</view>
											<view class="content">{{comment.content}}</view>
										</view>
									</view>
									<view class="comment-bottom">
										<view class="option" @click="changeAnswerCommentLikeStatus(index)">
											<uni-icons v-if="comment.isLiked" type="hand-up" size="20" color="#5DACB1"></uni-icons>
											<uni-icons v-else type="hand-up" size="20" color="#dddddd"></uni-icons>
											<view style="margin-left: 10rpx;font-size: 28rpx;" :style="{'color': comment.isLiked ? '#5DACB1' : '#dddddd' }">{{comment.goodNumber}}</view>
										</view>
										<view class="time">{{comment.gmtCreate | gmtToDate}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="comment-input" :style="{ 'margin-bottom' : isFocus ? '30rpx' : '0' }">
			<view class="tag-area" @click="changeInputType()">
				<view class="tag">
					<uni-icons v-if="inputMind.isComment" type="checkmarkempty" size="10" color="gray"></uni-icons>
				</view>
				<view class="tag-text">评论</view>
			</view>
			<view class="content" :style="{ height:inputMind.lineCount*40+'rpx' }">
				<textarea class="content-textarea" v-model="inputMind.content" placeholder="输出你的思考"
					@linechange="lineChange" :show-confirm-bar="false"
					:style="{ height:inputMind.lineCount*40+'rpx' }" />
			</view>
			<view class="input-button" @click="createMind()">生成</view>
		</view>

		<uni-popup ref="questionDetail" type="center">
			<view class="modal-box">
				<view style="font-size: 120%; color: #2c2c2c; font-weight: bold; margin-top: 20rpx; margin-bottom: 10rpx">
					{{ question.title }}
				</view>
				<rich-text :nodes="question.context" :class="{'limit-line' : isOut && isNotShow}"
					style="line-height: 50rpx;font-size: 100%; margin-top: 10rpx;color: #2c2c2c;">
				</rich-text>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import http from '@/common/service/service.js';
	import userInfoCard from '@/components/user-info-card.vue'
	export default {
		components: {
			userInfoCard
		},
		data() {
			return {
				comments: [],
				commentPage: {
					total: 0,
					pageNow: 1,
					pageSize: 20
				},

				showAnswerAdd: 0,
				pageScrollTop: 0,
				isFocus: false,
				keyHei: 0,


				inputMind: {
					isComment: false,
					lineCount:1,
					content: ""
				},

				question: {},
				point: {},
				answer: {},



				windowHeight: 100,
				mindDeepColor: ['#e7e7e7', '#b9b9b9', '#636363', '#000000'],

				sortTypes: ["默认", "最新", "我的"],
				currentSortTypeIndex: 0,



				isOut: true,
				isNotShow: true,

				paddingTop:null
			};
		},
		onLoad: function(options) {
			this.question.id = options.questionId
			this.point.id = options.pointId
			this.answer.id = options.answerId


			this.getQuestionInfo()
			this.getPointInfo()
			this.getAnswerInfo()
			this.pageAnswerComment()
			uni.onKeyboardHeightChange((res) => {
				this.keyHei = res.height
			})


			// 调整搜索位置
			// #ifdef MP-WEIXIN
			// 1.获取屏幕可使用宽度
			let windowWidth = uni.getSystemInfoSync().windowWidth;
			// 3.获取胶囊按钮位置信息
			const menuButton = uni.getMenuButtonBoundingClientRect();
			// // 5.导航栏与状态栏拉开距离  margin-top: statusBarTop + 'rpx';
			this.paddingTop = menuButton.top * (750 / windowWidth) + 'rpx';
			// #endif
		},


		Scroll(e) {
			this.pageScrollTop = e.scrollTop
		},
		methods: {
			getQuestionInfo() {
				this.$api.getQuestionInfo({
					id: this.question.id
				}).then(res => {
					this.question = res.data
				})
			},

			getPointInfo() {
				this.$api.getPointInfo({
					id: this.point.id
				}).then(res => {
					this.point = res.data
				})
			},

			getAnswerInfo() {
				this.$api.getAnswerInfo({
					id: this.answer.id
				}).then(res => {
					this.answer = res.data
				})
			},

			pageAnswerComment(answerId) {
				this.$api.pageAnswerComment({
					answerId: this.answer.id,
					pageNow: this.commentPage.pageNow,
					pageSize: this.commentPage.pageSize,
					sortBy:this.commentPage.sortBy
				}).then(res => {
					this.commentPage.total = res.data.total
					this.comments = res.data.rows
				})
			},

			changeAnswerLikeStatus(answerId) {

				this.$api.changeAnswerLikeStatus({
					id: answerId
				}).then(() => {
					this.answer.isLiked = !this.answer.isLiked
					if(this.answer.isLiked){
						this.answer.likeCount++
					}else{
						this.answer.likeCount--
					}
				})
			},

			changeAnswerCommentLikeStatus(commentIndex){
				this.$api.changeAnswerCommentLikeStatus({
					id: this.comments[commentIndex].id
				}).then(() => {
					if(this.comments[commentIndex].isLiked){
						this.comments[commentIndex].goodNumber = this.comments[commentIndex].goodNumber-1
					}else{
						this.comments[commentIndex].goodNumber = this.comments[commentIndex].goodNumber+1
					}
					this.comments[commentIndex].isLiked = !this.comments[commentIndex].isLiked
				})
			},

			changeInputType() {
				this.inputMind.isComment = !this.inputMind.isComment
			},

			showAll() {
				this.$refs.questionDetail.open('center')
			},
			
			lineChange(e) {
				this.inputMind.lineCount = e.detail.lineCount
				this.$forceUpdate()
			},

			toAddAnswer() {
				this.showAnswerAdd = 1
			},

			createMind() {
				if (this.inputMind.isComment) {
					this.$api.createAnswerComment({
						answerId:this.answer.id,
						content: this.inputMind.content
					}).then(res => {
						uni.showToast({
							icon: 'success'
						})
						this.commentPage.pageNow = 0
						this.commentPage.sortBy = 1
						this.pageAnswerComment()
					})
				} else {
					this.$api.createMind({
						content: this.inputMind.content
					}).then(res => {
						uni.showToast({
							icon: 'success'
						})
						this.inputMind.content = ""
					})
				}

			},

			changeSortType(index) {
				this.currentSortTypeIndex = index
			},

			toEditAnswer(){
				uni.navigateTo({
					url:"/pages_modex/question/answer-add?answerId="+this.answer.id+"&questionId="+this.question.id+"&pointId="+this.point.id
				})
			},

			toBackPage() {
				uni.navigateBack()
			}
		},
		watch: {
			keyHei(val) {
				console.log('keyHei change!', val)
				if (val) {
					this.isFocus = true
				} else {
					this.isFocus = false
				}
			},
		},

		filters: {
			gmtToDate(gmt) {
				let fmt = "YYYY-mm-dd HH:MM";
				let date = new Date(parseInt(gmt));
				let ret;
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
					// 有其他格式化字符需求可以继续添加，必须转化成字符串
				};
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt);
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						);
					}
				}
				return fmt;
			}
		},
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: #F8F8F8;
	}

	.top-background {
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 600rpx;
		background: linear-gradient(#1E5D72, #5DACB1, #a7cfce);
	}

	.back-arrow {
		width: 100%;
		//#ifdef MP-WEIXIN
		width: 550rpx;
		//#endif

		padding-top: 100rpx;

		// #ifdef H5
		padding-top: 40rpx;
		// #endif

		height: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 3;
		position: relative;
	}
	.question-info {
		z-index: 2;
		position: relative;

		.limit-line {
			/*超过范围进行隐藏不显示*/
			overflow: hidden;
			/*文本溢出, 使用省略号 */
			text-overflow: ellipsis;
			/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
			display: -webkit-box;
			/*限制块容器显示的文本行数, 按照你的需求设置*/
			-webkit-line-clamp: 3;
			/*盒子的方向, 垂直、水平等*/
			-webkit-box-orient: vertical;
			/*文字换行, 可以在单词内断*/
			word-wrap: break-word;
		}

		.option-text {
			position: relative;
			left: 630rpx;
			bottom: 40rpx;
			z-index: 5;
			color: #ffffff;
			// box-shadow: 0px 0px 30rpx 10rpx #ffffff;
			background-color: rgba(105, 178, 182, 1)
		}
	}

	.page-btns {
		display: flex;
		position: fixed;
		right: 100rpx;
		bottom: 100rpx;
		z-index: 10;
	}

	.main-content {
		position: relative;
		z-index: 2;
		width: 100%;
		border-radius: 25rpx 25rpx 0 0;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: #fafafa;
		min-height: 60vh;

		.answer {
			background-color: white;
			display: flex;
			flex-direction: column;


			.answer-content {
				width: 670rpx;
				margin-left: 40rpx;
				margin-right: 30rpx;

				line-height: 50rpx;
				letter-spacing: 4rpx;

				/deep/img {
					width: 100%;
				}

				// /deep/p {
				// 	margin-bottom: 20rpx;
				// }

				font-size: 32rpx;


				min-height: 600rpx;
			}

			.bottom {
				margin: 20rpx 30rpx;
				display: flex;
				flex-direction: column;

				.time {
					display: flex;
					justify-content: flex-end;
					color: gray;
					font-size: 30rpx;
				}

				.options {
					width: 100%;
					margin-top: 40rpx;


					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.option {
						padding: 10rpx 20rpx;
						background-color: #f5f5f5;
						border-radius: 40rpx;
					}
				}


				.comments {
					background-color: white;
					display: flex;
					flex-direction: column;
					margin-top: 30rpx;
					margin-bottom: 30rpx;

					.title {
						font-weight: bold;
					}

					.comment-list {
						margin-top: 30rpx;
						display: flex;
						flex-direction: column;

						.comment {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							margin-bottom: 20rpx;
							padding: 20rpx;

							.comment-top {
								display: flex;
								flex-direction: row;

								.avatar {}

								.last {
									margin-top: 10rpx;
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									margin-left: 20rpx;
									font-size: 32rpx;

									.nickname {
										font-weight: bold;
									}

									.content {
										width: 620rpx;
										margin-top: 10rpx;
										margin-left: 0;
									}

								}

							}

							.comment-bottom {
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								align-items: center;
								margin-top: 10rpx;
								padding-left: 70rpx;


								.time {
									font-size: 28rpx;
								}

								.option{
									display: flex;
									flex-direction: row;
									align-items: center;
								}
							}

						}

					}
				}
			}
		}
	}

	.card {
		background-color: white;
		box-shadow: 0px 0px 10px 3px #f0f1f0;
		border-radius: 20rpx;
		min-height: 50rpx;
	}

	.modal-box {
		width: 600rpx;
		max-height: 800rpx;
		margin-top: 200rpx;
		overflow-y: scroll;


		padding: 40rpx;
		border-radius: 20rpx;
		background: white;

		display: flex;
		flex-direction: column;

		text-align: left;
	}



	.comment-input {
		width: 750rpx;
		position: fixed;
		z-index: 2;
		bottom: 0;
	
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-end;
		padding: 30rpx 0;
	
		background-color: #ffffff;
		border-top: 1px solid #d5d5d5;
	
		.tag-area {
	
			width: 50rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
	
	
			.tag {
				height: 35rpx;
				width: 35rpx;
				border: solid thin gray;
				border-radius: 10rpx;
				margin-bottom: 5rpx;
				
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
	
			}
	
			.tag-text {
				font-size: 20rpx;
			}
	
		}
	
		.content {
			width: 500rpx;
			max-height: 420rpx;
			padding: 20rpx;
	
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
	
	
			border: 1rpx solid #d5d5d5;
			border-radius: 10rpx;
	
			.content-textarea {
				width: 100%;
				margin-bottom: 10rpx;
				margin-top: 10rpx;
				max-height: 400rpx;
				overflow: scroll;
			}
		}
	
		.input-button {
			width: 70rpx;
			margin-bottom: 20rpx;
			color: gray;
		}
	}




	.myButton {
		color: white;
		border-radius: 20rpx;
		background-color: #1244de;
		box-shadow: 1px 1px 8px 2px #c8cec8;
		font-size: 80%;
		font-weight: bold;
		height: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.mind-date {
		color: gray;
		font-size: 70%;
		margin-left: 20rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>
